<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
    <style>
        /* ----------------------------------------------------------------------------------------------------------*/
        /* NavCubePlugin */
        /* ----------------------------------------------------------------------------------------------------------*/

        #myNavCubeCanvas {
            position: absolute;
            width: 250px;
            height: 250px;
            bottom: 50px;
            right: 10px;
            z-index: 200000;
        }

        /* ----------------------------------------------------------------------------------------------------------*/
        /* TreeViewPlugin */
        /* ----------------------------------------------------------------------------------------------------------*/

        #treeViewContainer {
            pointer-events: all;
            height: 100%;
            overflow-y: scroll;
            overflow-x: hidden;
            position: absolute;
            background-color: rgba(255, 255, 255, 0.2);
            color: black;
            top: 80px;
            z-index: 200000;
            float: left;
            left: 0;
            padding-left: 10px;
            font-family: 'Roboto', sans-serif;
            font-size: 15px;
            user-select: none;
            -ms-user-select: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            width: 350px;
        }

        #treeViewContainer ul {
            list-style: none;
            padding-left: 1.75em;
            pointer-events: none;
        }

        #treeViewContainer ul li {
            position: relative;
            width: 500px;
            pointer-events: none;
            padding-top: 3px;
            padding-bottom: 3px;
            vertical-align: middle;
        }

        #treeViewContainer ul li a {
            background-color: #eee;
            border-radius: 50%;
            color: #000;
            display: inline-block;
            height: 1.5em;
            left: -1.5em;
            position: absolute;
            text-align: center;
            text-decoration: none;
            width: 1.5em;
            pointer-events: all;
        }

        #treeViewContainer ul li a.plus {
            background-color: #ded;
            pointer-events: all;
        }

        #treeViewContainer ul li a.minus {
            background-color: #eee;
            pointer-events: all;
        }

        #treeViewContainer ul li a:active {
            top: 1px;
            pointer-events: all;
        }

        #treeViewContainer ul li span:hover {
            color: white;
            cursor: pointer;
            background: black;
            padding-left: 2px;
            pointer-events: all;
        }

        #treeViewContainer ul li span {
            display: inline-block;
            width: calc(100% - 50px);
            padding-left: 2px;
            pointer-events: all;
            height: 23px;
        }

        #treeViewContainer .highlighted-node {
            /* Appearance of node highlighted with TreeViewPlugin#showNode() */
            border: black solid 1px;
            background: yellow;
            color: black;
            padding-left: 1px;
            padding-right: 5px;
            pointer-events: all;
        }
    </style>
</head>

<body>
    <input type="checkbox" id="info-button" />
    <label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
    <canvas id="myCanvas"></canvas>
    <canvas id="myNavCubeCanvas"></canvas>
    <div id="treeViewContainer"></div>
    <div class="slideout-sidebar">
        <img class="info-icon" src="../../assets/images/bim_icon.png" />
        <h1>CxConverterIFCLoaderPlugin</h1>
        <h3>Components used</h3>
        <ul>
            <li>
                <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html" target="_other">Viewer</a>
            </li>
            <li>
                <a href="../../docs/class/src/plugins/CxConverterIFCLoaderPlugin/CxConverterIFCLoaderPlugin.js~CxConverterIFCLoaderPlugin.html"
                    target="_other">CxConverterIFCLoaderPlugin</a>
            </li>
            <li>
                <a href="../../docs/class/src/plugins/TreeViewPlugin/TreeViewPlugin.js~TreeViewPlugin.html"
                    target="_other">TreeViewPlugin</a>
            </li>
            <li>
                <a href="../../docs/class/src/plugins/NavCubePlugin/NavCubePlugin.js~NavCubePlugin.html"
                    target="_other">NavCubePlugin</a>
            </li>
        </ul>
        <h3>Assets</h3>
        <ul>
            <li>
                <a href="http://openifcmodel.cs.auckland.ac.nz/Model/Details/274" target="_other">Model source</a>
            </li>
        </ul>
    </div>
    <div style="position:absolute; left:360px; top:80px;">
        <table>
            <tr>
                <td><b>Progress:</b></td>
                <td id="progressPercentage"></td>
            </tr>
            <tr>
                <td><b>Progress text:</b></td>
                <td id="progressText"></td>
            </tr>
        </table>
    </div>
</body>

<script type="module">

    import { CxConverterIFCLoaderPlugin, Viewer, NavCubePlugin, TreeViewPlugin, SceneModel } from "../../dist/xeokit-sdk.es.js";
    import * as CxConverter from "https://cdn.jsdelivr.net/npm/@creooxag/cxconverter@5.4.5-beta-2/dist/index.mjs";

    const viewer = new Viewer({
        canvasId: "myCanvas",
        transparent: true
    });

    viewer.camera.eye = [-3.933, 2.855, 27.018];
    viewer.camera.look = [4.400, 3.724, 8.899];
    viewer.camera.up = [-0.018, 0.999, 0.039];

    new NavCubePlugin(viewer, {
        canvasId: "myNavCubeCanvas",
        visible: true,
        size: 250,
        alignment: "bottomRight",
        bottomMargin: 100,
        rightMargin: 10
    });

    new TreeViewPlugin(viewer, {
        containerElement: document.getElementById("treeViewContainer"),
        autoExpandDepth: 3 // Initially expand the root tree node
    });

    const cxConverterIFCLoaderPlugin = new CxConverterIFCLoaderPlugin(viewer);
    cxConverterIFCLoaderPlugin.setCxConverterModule(CxConverter);
    const progressCallback =
        (progress) => {
            const progressPercentage = document.getElementById("progressPercentage");
            progressPercentage.innerText = progress.toFixed(1) + "%";
        }

    const progressTextCallback =
        (progressText) => {
            const progressTextElement = document.getElementById("progressText");
            progressTextElement.innerText = progressText;
        }

    const sceneModel = await cxConverterIFCLoaderPlugin.load({
        src: "../../assets/models/ifc/Duplex.ifc",
        progressCallback: progressCallback,
        progressTextCallback: progressTextCallback
    });

    sceneModel.on("loaded", () => {
        viewer.cameraFlight.flyTo();
    });

</script>

</html>